<template>
  <div class="p-d">
    <el-row :gutter="20" class="content flex-b row-m">
      <el-col :span="4" class="left ">
        <div class="p-d b-f left-tree">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree class=" pa-data-collect-tree" default-expand-all :expand-on-click-node="false" :data="treeData" :highlight-current="true"
            :props="defaultProps" @node-click="handleNodeClick" node-key="id" :default-checked-keys="[guideId]" :render-content="renderContent"
            :filter-node-method="filterNode" ref="treeDataRef">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" class="right  ">
        <div class="p-d b-f">
          <div class="">
            <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
          </div>
          <div class="">
            <div class="btnStyle flex-between ">
              <ButtonComp :buttonData="buttonData" />
            </div>
            <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction"
              :isSelect="true" :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="initTree"
              @handleSelectionChange="handleSelectionChange"></TableCompEle>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTreeList } from '@/api/guide.js'
import { getList, deletes } from '@/api/projectDeclare.js'
export default {
  data() {
    return {
      filterText: '',
      guideId: null,
      isItem: false,
      defaultProps: {
        children: 'items',
        label: 'name'
      },
      treeData: [],
      multipleSelection: [],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      buttonData: [
        {
          kind: 'button',
          label: '新增',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => {
            this.$router.push({
              name: 'ProjectDeclareAdd',
              params: { flag: 'add' }
            })
          }
        },
        {
          kind: 'button',
          label: '批量删除',
          plain: false,
          size: 'small',
          type: 'danger',
          click: () => {
            if (this.multipleSelection.length == 0) {
              this.$message({
                type: 'warning',
                message: '请选择要删除的数据'
              })
              return
            }
            const ids = []
            this.multipleSelection.forEach(items => {
              ids.push(items.id)
            })
            this.deleteFun(ids)
          }
        }
      ],
      tableData: [],
      tableConfig: [
        {
          prop: 'domainName',
          label: '申报领域'
        },
        {
          prop: 'guideName',
          label: '指南条目'
        },
        {
          prop: 'name',
          label: '项目名称'
        },
        {
          prop: 'departmentName',
          label: '申报单位'
        },
        {
          prop: 'projectHeader',
          label: '项目负责人'
        },
        {
          prop: 'researchFund',
          label: '项目经费'
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(180),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$router.push({
                name: 'ProjectDeclareAdd',
                params: { flag: 'look', id: row.id }
              })
            }
          },
          {
            label: '修改',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$router.push({
                name: 'ProjectDeclareAdd',
                params: { flag: 'edit', id: row.id }
              })
            }
          },
          {
            label: '删除',
            isLink: true,
            type: 'danger',
            method: row => {
              this.deleteFun([row.id])
            }
          }
        ]
      },
      queryString: {
        name: '',
        projectHeader: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getPageList()
        },
        formData: [
          {
            type: 'Input',
            label: '项目名称',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入指南名称'
          },
          {
            type: 'Input',
            label: '项目负责人',
            prop: 'projectHeader',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入项目负责人'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
            this.getPageList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              name: '',
              projectHeader: ''
            }
            this.queryParams.currentPage = 1
            this.getPageList()
          }
        }
      ]
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeDataRef.filter(val)
    }
  },
  created() {
    this.initTree()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      console.log(data)
      this.guideId = data.id
      this.isItem = data?.isItem ?? false
      this.getPageList()
    },
    initTree() {
      getTreeList().then(res => {
        this.treeData = res?.data ?? []
        this.guideId = res?.data[0]?.id ?? null
        this.$nextTick(function () {
          this.$refs.treeDataRef.setCurrentKey(this.guideId)
          this.getPageList()
        })
      })
    },
    getPageList() {
      if (this.isItem) {
        this.queryString.guideItemId = this.guideId
        this.queryString.guideId = null
      } else {
        this.queryString.guideId = this.guideId
        this.queryString.guideItemId = null
      }
      getList(
        Object.assign(
          {
            currentPage: this.queryParams.currentPage,
            pageSize: this.queryParams.pageSize
          },
          this.queryString
        )
      ).then(res => {
        this.queryParams.total = res?.data?.total ?? 0
        this.tableData = res.data?.list ?? []
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteFun(ids) {
      this.$confirm(`确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deletes({
            ids: ids
          }).then(() => {
            this.$refs.multipleTable.clearSelection()
            this.getPageList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    renderContent(h, { data }) {
      return (
        <span class="pa-tree-node">
          <span title={data.name}>{data.name}</span>
        </span>
      )
    }
  }
}
</script>

<style lang="less" scoped>
  .content {
    height: 73vh;
    display: flex;
    > div {
      height: 100%;
      .b-f {
        height: 100%;
      }
    }
  }
  .left-tree {
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0px;
      background-color: #f1f1f1;
      border-radius: 5px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 5px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #555;
    }
    .el-tree {
      padding-top: 10px;
      ::v-deep .pa-tree-node {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      ::v-deep .el-tree-node {
        margin-left: -10px;
      }
      ::v-deep .el-tree-node__content {
        height: 40px;
      }
      ::v-deep .el-tree-node__content:hover {
        background: rgba(64, 158, 255, 0.1);
      }
    }
  }
</style>